style: Fix HighContrast issues with notifications

- define a new hc_mix_color for mixing functions that was making bg color transparent
- fix missing HC outline on banner notifications
- fix notification timestamp not changing in HC due to color
- closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7283

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3075>

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index c68238dcb390fc3b8cd395b5ca9e09190e0a99da..e2b8b2779c40509a126baaa5460642895a5b6f2c 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -197,7 +197,7 @@
     background-color: $hover_bg_color;
 
     @if $is_highcontrast {
-      background-color: mix($hover_bg_color, $hc_inset_color, 10%);
+      background-color: mix($hover_bg_color, $hc_mix_color, 90%);
     }
   }
 
@@ -208,7 +208,7 @@
     background-color: $active_bg_color;
 
     @if $is_highcontrast {
-      background-color: mix($active_bg_color, $hc_inset_color, 10%);
+      background-color: mix($active_bg_color, $hc_mix_color, 90%);
     }
   }
 
@@ -222,9 +222,9 @@
     &:active { background-color: lighten($checked_bg_color, 15%);}
 
     @if $is_highcontrast {
-      background-color: mix($checked_bg_color, $hc_inset_color, 10%);
-      &:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_inset_color, 10%);}
-      &:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_inset_color, 10%);}
+      background-color: mix($checked_bg_color, $hc_mix_color, 90%);
+      &:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_mix_color, 90%);}
+      &:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_mix_color, 90%);}
     }
   }
 
@@ -355,6 +355,7 @@
   } @else {
     @include button(normal);
   }
+
   &:hover {@include button(hover);}
   &:active {@include button(active);}
   &:focus {@include button(focus);}

diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index 786d3cd23d19e7a83c774704d1f6f595c00901d1..1a48a06090b97865d5d19e4e8842efa8b110ae86 100644 (file)
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -56,7 +56,7 @@ $system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
 
 // derived global colors
 // insensitive state
-$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_fg_color: $fg_color;
 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
 $insensitive_borders_color: $borders_color;
 
@@ -74,3 +74,4 @@ $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_colo
 
 // inset colour for high contrast
 $hc_inset_color: transparentize($fg_color, 0.6);
+$hc_mix_color: $light_1;

diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 6e4d9f60adf538056ca723f54bf32fafb4894da6..02cb881371e9854e1f7fe8f8b38d6c06af0f7ea0 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -105,7 +105,7 @@
       // notification time stamp
       > .event-time {
         @extend %caption;
-        color: transparentize($fg_color, 0.5);
+        color: $insensitive_fg_color;
         padding-bottom: to_em(1px);
 
         &:ltr { text-align: right };

diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index e98739745bb0c6dbde46ed19d27d6962dbf510a2..5088969d89b478f03c72372bcdbeb9d633055c46 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -11,6 +11,10 @@ $notification_banner_width: 34em;
   border-radius: $modal_radius;
   margin: $base_margin;
 
+  @if $is_highcontrast {
+    border: 1px solid $hc_inset_color;
+  }
+
   .notification-actions {
     spacing: 0;
   }